<template>
  <div class="editgoods">
    <!-- 顶部 -->
    <el-tabs type="border-card">
      <!-- 基础信息 -->
      <el-tab-pane label="基础信息">
        <el-form ref="form" :model="form">
          <el-form-item label="所属分类">
            <el-select v-model="form.category_id" placeholder="请选择所属分类">
              <el-option
                :label="item.name"
                :value="item.id"
                v-for="(item, index) in category"
                :key="index"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="商品名称">
            <el-input v-model="editdata.name" class="produname"></el-input>
          </el-form-item>

          <el-form-item label="所属品牌">
            <el-select v-model="editdata.brand_id" placeholder="请选择活动区域">
              <el-option
                :label="item.id"
                :value="item.id"
                v-for="item in BrandLists"
                :key="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品简介">
            <el-input
              class="produintroduction"
              type="textarea"
              v-model="editdata.goods_brief"
            ></el-input>
          </el-form-item>

          <el-form-item label="商品图片">
            <el-upload
              class="avatar-uploader"
              action="http://kumanxuan1.f3322.net:8360/admin/upload/goodNewPic"
              name="good_pic"
              :on-success="handleAvatarSuccess"
              :headers="token"
              :show-file-list="false"
            >
              <img v-if="posterURL" :src="posterURL" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>

          <el-form-item label="轮播图片" v-if="gallery">
            <el-upload
              action="http://kumanxuan1.f3322.net:8360/admin/upload/goodNewPic"
              list-type="picture-card"
              :on-remove="handleRemove"
              :file-list="gallery"
              name="good_pic"
              :on-success="handlePictureCardPreview"
              :headers="token"
              :show-file-list="true"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>

          <el-form-item label="商品单位">
            <el-input
              v-model="editdata.goods_unit"
              class="produintroduction"
            ></el-input>
          </el-form-item>

          <el-form-item label="商品库存">
            <el-input
              v-model="editdata.goods_number"
              class="produintroduction"
            ></el-input>
          </el-form-item>

          <el-form-item label="商品售价">
            <el-input
              v-model="editdata.retail_price"
              class="produintroduction"
            ></el-input>
          </el-form-item>
          <el-form-item label="推荐类型">
            <el-checkbox label="新品" name="type" v-model="erg"></el-checkbox>
            <el-checkbox label="人气" name="type" v-model="erg"></el-checkbox>
          </el-form-item>

          <el-form-item label="上架" prop="delivery">
            <el-switch v-model="form.delivery"></el-switch>
          </el-form-item>

          <el-form-item label="排序">
            <el-input
              v-model="editdata.sort_order"
              class="produintroduction"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit(editdata, category)"
              >保存修改</el-button
            >
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>

      <!-- 商品属性 -->
      <el-tab-pane label="商品属性">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="date" label="日期" width="180">
            <el-input v-model="input" placeholder="请输入内容"></el-input>
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="180">
            <el-input v-model="input" placeholder="请输入内容"></el-input>
          </el-table-column>
          <el-table-column prop="address" label="地址">
            <el-input v-model="input" placeholder="请输入内容"></el-input>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <!--商品详情  -->
      <el-tab-pane label="商品详情"> 111111 </el-tab-pane>
      <!-- Two-way Data-Binding -->
    </el-tabs>
  </div>
</template>


</script>

<script>

import {
  getGoodInfo,
  getCategoryLists,
  getBrandLists,
  getAttributeLists,
  getUserByToken,
  editGoodInfo,
} from "../../request/httpApi";
export default {

  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value: "",
      //商品图片链接
      posterURL: "",
      //token
      token: {},
      input: "",
      name: "",
      tableData: [],
      form: {
        name: "",
        region: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        delivery: false,
      },
      //图片
      imageUrl: "",
      //
      editdata: {
        name: null,
        brand_id: null,
        goods_brief: null,
        goods_unit: null,
        goods_number: null,
        retail_price: null,
        sort_order: null,
      },
      //轮播图图片
      gallery: [],
      //分类
      category: [
        {
          id: null,
          name: null,
        },
      ],
      //品牌
      BrandLists: [
        {
          id: null,
        },
      ],
      //轮播图
      dialogImageUrl: [],
      //EditGood.vue
      filName: [],

      dialogVisible: false,
      //flielist 商品图片
      produlist: [
        {
          name: null,
          url: null,
        },
      ],
      //属性数据
      attributeLists: [
        {
          name: null,
        },
      ],
      erg: "",
      token: {},
    };
  },

  created() {
    // //获取用户信息
    // getUserByToken().then((res) => {
    //   // console.log(res);
    //   if (res.data == 0) {
    this.token = {
      "X-Nideshop-Token": localStorage.getItem("x-auth-token"),
    };
    //   }
    // });
    //发送商品信息请求
    // console.log(this.$route.params.gid);
    getGoodInfo({ id: this.$route.params.gid }).then((res) => {
      // console.log(res);
      if (res.errno == 0) {
        let { gallery } = res.data;

        this.editdata = res.data;
        // let flielist = res.data.list_pic_url;
        // console.log(res.data.list_pic_url);
        this.produlist.push({
          name: res.data.goods_sn + ".jpg",
          url: res.data.list_pic_url,
        });
        // console.log(this.produlist);

        this.gallery = gallery.map((item) => {
          return {
            name: item.sort_order + ".jpg",
            url: item.img_url,
          };
        });
        // console.log(this.gallery);
        this.form = res.data;
        console.log(res.data);
        this.posterURL = res.data.list_pic_url;
      }
    });

    //发送分类请求
    getCategoryLists({ size: 100 }).then((res) => {
      // console.log(res);
      if (res.errno === 0) {
        this.category = res.data;
      }
    });

    //发送查询品牌列表请求
    getBrandLists({ size: 100 }).then((res) => {
      // console.log(res);
      if (res.errno === 0) {
        this.BrandLists = res.data.data;
      }
    });

    //发送属性请求
    getAttributeLists({ size: 1000 }).then((res) => {
      // console.log(res);
      if (res.errno == 0) {
        this.attributeLists = res.data.data;
        // console.log(res.data.data);
      }
    });
  },

  methods: {
    //点击商品属性增加
    onProduAttr() {
      // console.log(111);
    },
    //商品图片
    handleAvatarSuccess(file) {
      this.posterURL = file.data.fileUrl;
    },
    del() {
      //  this
    },
    //轮播图
    handleRemove(file, fileList) {},
    handlePictureCardPreview(file, fileList) {
      // console.log(file);
       this.dialogImageUrl=[]
      this.gallery.map((item) => {
        // console.log(item.url);
        this.dialogImageUrl.push(item.url);
      });

      this.dialogImageUrl.push(file.data.fileUrl);
      console.log(this.dialogImageUrl);
    },

    onSubmit(val1, val2) {
      // console.log(this.gallery);

      // console.log(val1);
      // console.log(val2);
      editGoodInfo({
        attribute_category: 0,
        brand_id: val1.brand_id,
        category_id: 1036531,
        counter_price: 0,
        extra_price: 0,
        gallery: this.dialogImageUrl,
        gallerys: this.dialogImageUrl,
        goods_brief: val1.goods_brief,
        goods_desc: null,
        goods_number: val1.goods_number,
        goods_sn: "",
        goods_unit: val1.goods_unit,
        id: 1185972,
        is_app_exclusive: 0,
        is_delete: 0,
        is_hot: val1.is_hot,
        is_limited: 0,
        is_new: val1.is_new,
        is_on_sale: val1.is_on_sale,
        keywords: val1.keywords,
        list_pic_url: this.posterURL,
        primary_pic_url: val1.primary_pic_url,
        name: val1.name,
        primary_product_id: val1.primary_product_id,
        promotion_desc: val1.promotion_desc,
        retail_price: val1.retail_price,
        sell_volume: val1.sell_volume,
        sort_order: val1.sort_order,
        unit_price: val1.unit_price,
      }).then((res) => {
        console.log(res);
      });
this.$router.push('/good')
    },
  },
};
</script>

 <style lang="less" scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.produname {
  width: 218px;
}
.produintroduction {
  width: 218px;
}
</style>